<!doctype html>
<html>
<title>jQuery平面图区域标记拖拽移动代码</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <script type="text/javascript" src="../js/jquery.min.js" ></script> -->
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/context/context.js"></script>
<script type="text/javascript" src="/context/drag.js" ></script>
<link rel="stylesheet" type="text/css" href="/context/context.standalone.css">
<!-- <link rel="stylesheet" type="text/css" href="http://blog.aigouzhushou.com/layui-v2.4.3/layui-v2.4.5/css/layui.css"> -->
<style type="text/css">
html,body{margin:0;padding:0;font:14px/1.5em simsun;overflow:hidden;height:100%;OVERFLOW-Y: auto; OVERFLOW-X:hidden;width: 100%;}
#canvas{position:absolute;right:0;top:45px;z-index:9;border:2px dashed #ccc;padding:10px;background:#fff;width: 75%;}
/* #canvas{width: 75%;height: 100%;} */
.transparent{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;}
.box{width:200px;height:100px;cursor:move;position:absolute;top:30px;left:30px;z-index:99;background: none;}
.box .bg{width:100%;height:100%;background-color:orange;}
.box .coor{width:10px;height:10px;overflow:hidden;cursor:se-resize;position:absolute;right:0;bottom:0;background-color:red;}
/*.content{display:none;}*/
.box .content{position:absolute;left:35%;top:100%;z-index:99;text-align:center;font:bold 10px/1.5em simsun;}
pre {
    /*display: none;*/
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
    background-color: rgba(255, 255, 255, 0);
    border: 0px solid #ccc;
}
#debug{position:absolute;right:10px;top:10px;z-index:88;border:1px solid #ccc;width:100px;height:100px;background:#fff;}
/* #toolbar{position:absolute;left:10px;top:10px;z-index:88;width: 20%;height: 100%;background-color: #ccc;} */
#toolbar{position:absolute;width:18%;top:45px;height:700px;overflow-y:scroll;background-color: #fff;}
.right{width:100%}
.toolbar::-webkit-scrollbar {
      /*滚动条宽*/
      width: 4px;
    }
    .toolbar::-webkit-scrollbar-thumb {
      /*正在滑动的小块*/
      border-radius: 10px;
      background-color: #586cb1;
    }

    .toolbar::-webkit-scrollbar-track {
      /*滚动内部轨道*/
      box-shadow: inset 0 0 5px rgba(186, 32, 32, 0.2);
      background: rgb(140, 140, 158);
      border-radius: 10px;
    }
</style>
</head>
<input type="hidden" name="roomname" class="roomname" />
<body class="list">
<!-- <pre id="debug"></pre> -->
<div id="hezi" class="right" style="display: flex;">
<input type="button" value="保存" class="btn" id="btn_save" />
    <div id="toolbar" class="toolbar">
        <input type="button" value="添加文本" class="btn" id="btn_add" /> 
        <input type="button" value="添加监测点" class="btn" id="btn_addpoint" /> 
        <!--<input type="button" value="锁定区域" class="btn" id="btn_lock" />-->
    </div>
    <!-- <div>TTTT</div> -->
    <div id="canvas">
        <img src="{{$planeJPG}}" />
    </div>
</div>
<script>
$(function(){
    //初始化计数器
    var num = 0;
    //区块锁定标识
    var lock = false;
    //加载layer拓展
    layer.config({
        extend: 'extend/layer.ext.js'
    });
    //右键菜单参数
    context.init({
        fadeSpeed: 100,
        filter: function ($obj){},
        above: 'auto',
        preventDoubleContext: true,
        compress: false
    });
    //调试输出方法
    function debug(msg){
        $("#debug").text(msg);
    }
    function createBox(data){
        var dataId = data.id || '';
        var value = data.text || '';
        var color = data.color || '';
        var height = data.height || 30;
        var width = data.width || 30;
        var pageX = data.pageX || 0;
        var pageY = data.pageY || 0;
        
        //更新计数器并记录当前计数
        var curNum = num++;
        //创建区域块
        var pos = $("#canvas").position();
        var box = $('<div class="box" rel="'+curNum+'" dataId="'+dataId+'">'+value+'</div>').css({
            width : width,
            height : height,
            top : pageY > 0 ? pageY : (pos.top > 0 ? 0 : pos.top * -1 + 50),
            left : pageX > 0 ? pageX : (pos.left > 0 ? 0 : pos.left * -1 + 30)
        }).appendTo("#canvas");
        
        //计算文本位置
        //box.find('.content').css({
        //    marginLeft : box.find('.content').width()/2*-1,
        //    marginTop : box.find('.content').height()/2*-1
        //});
        //创建右键菜单
        context.attach('.box[rel='+curNum+']', [
            {header: '操作'},
            {text: '编辑区域说明', action: function(e){
                    e.preventDefault();
                    layer.prompt({
                        title: '请输入区域说明',
                        formType: 2,
                        value: $('.box[rel='+curNum+'] .content').text()
                    }, function(value, index, elem){
                        layer.close(index);
                        var curCont = $('.box[rel='+curNum+'] .content');
                        curCont.text(value).css({
                            marginLeft : curCont.width()/2*-1,
                            marginTop : curCont.height()/2*-1
                        });
                    });
                }
            },
            {text: '更改区域尺寸', action: function(e){
                    e.preventDefault();
                    layer.prompt({
                        title: '请输入区域尺寸（宽,高），最小值：30',
                        formType: 0,
                        value: $('.box[rel='+curNum+']').width()+","+$('.box[rel='+curNum+']').height()
                    }, function(value, index, elem){
                        var reg = /^[0-9]+,[0-9]+$/;
                        if(!reg.test(value)){
                            alert('输入格式不正确，例：100,200');
                            return;
                        }
                        var size = value.split(',');
                        var box = $('.box[rel='+curNum+']');
                        box.css({
                            width : size[0] < 30 ? 30 : size[0],
                            height : size[1] < 30 ? 30 : size[1]
                        });
                        layer.close(index);
                    });
                }
            },
            {text: '删除区域', action: function(e){
                    e.preventDefault();
                    $('.box[rel='+curNum+']').remove();
                }
            },
            {divider: true},
            {header: '更改颜色'},
            {text: '<font color="orange">橙色</font>', action: function(e){
                    e.preventDefault();
                    $('.box[rel='+curNum+'] .bg').css('background-color', 'orange');
                }
            },
            {text: '<font color="red">红色</font>', action: function(e){
                    e.preventDefault();
                    $('.box[rel='+curNum+'] .bg').css('background-color', 'red');
                }
            },
            {text: '<font color="blue">蓝色</font>', action: function(e){
                    e.preventDefault();
                    $('.box[rel='+curNum+'] .bg').css('background-color', 'blue');
                }
            },
            {text: '<font color="green">绿色</font>', action: function(e){
                    e.preventDefault();
                    $('.box[rel='+curNum+'] .bg').css('background-color', 'green');
                }
            },
            {text: '<font color="purple">紫色</font>', action: function(e){
                    e.preventDefault();
                    $('.box[rel='+curNum+'] .bg').css('background-color', 'purple');
                }
            },
            {text: '<font color="yellow">黄色</font>', action: function(e){
                    e.preventDefault();
                    $('.box[rel='+curNum+'] .bg').css('background-color', 'yellow');
                }
            }
        ]);
    }
    //添加文本
    $("#btn_add").click(function(){
        //弹出区域说明输入框
        layer.prompt({
            title: '请输入区域说明',
            formType: 2 //0:input,1:password,2:textarea
        }, function(value, index, elem){
            layer.close(index);
            createBox({
                text : value,
                type : 1,
                width : 70,
                height : 30
            });
        });
    });
    //添加监控点
    $("#btn_addpoint").click(function(){
        //弹出区域说明输入框
        layer.prompt({
            title: '请输入说明',
            formType: 2 //0:input,1:password,2:textarea
        }, function(value, index, elem){
            layer.close(index);
            createBox({
                text : value,
                type : 1,
                width : 200,
                height : 100
            });
        });
    });
    //锁定区域
    $('#btn_lock').click(function(){
        if(lock){
            $(this).val("锁定区域");
            lock = false;
            $('.box .coor').show();
        }else{
            $(this).val("解锁区域");
            lock = true;
            $('.box .coor').hide();
        }
    });
    //保存
    $('#btn_save').click(function(){
        var data = [];
        $('.box').each(function(){
            var box = {};
            box['id'] = $(this).attr('dataId');
            box['text'] = $(this).find('.content').text();
            box['color'] = $(this).find('.bg').css('background-color');
            box['height'] = $(this).height();
            box['width'] = $(this).width();
            box['pageX'] = $(this).position().left;
            box['pageY'] = $(this).position().top;
            console.dir(box);
            data.push(box);
        });
    });
    //创建拖拽方法
    $("#canvas").mousedown(function(e){
        var canvas = $(this);
        e.preventDefault();
        var pos = $(this).position();
        this.posix = {'x': e.pageX - pos.left, 'y': e.pageY - pos.top};
        $.extend(document, {'move': true, 'move_target': this, 'call_down' : function(e, posix){
            canvas.css({
                'cursor': 'move',
                'top': e.pageY - posix.y,
                'left': e.pageX - posix.x
            });
        }, 'call_up' : function(){
            canvas.css('cursor', 'default');
        }});
    }).on('mousedown', '.box', function(e) {
        if(lock) return;
        var pos = $(this).position();
        this.posix = {'x': e.pageX - pos.left, 'y': e.pageY - pos.top};
        $.extend(document, {'move': true, 'move_target': this});
        e.stopPropagation();
    }).on('mousedown', '.box .coor', function(e) {
        var $box = $(this).parent();
        var posix = {
                'w': $box.width(), 
                'h': $box.height(), 
                'x': e.pageX, 
                'y': e.pageY
            };
        $.extend(document, {'move': true, 'call_down': function(e) {
            $box.css({
                'width': Math.max(30, e.pageX - posix.x + posix.w),
                'height': Math.max(30, e.pageY - posix.y + posix.h)
            });
        }});
        e.stopPropagation();
    });

    //测试加载
    var loadData = [{id : 1001,type: 1,text : "C16\n16.5",color : "rgb(255, 0, 0)",height : 30,width : 77,pageX : 627,pageY : 364},
                    {id : 1002,type: 1,text : "C17\n16.18",color : "rgb(255, 255, 0)",height : 30,width : 77,pageX : 709,pageY : 364},
                    {id : 1003,type: 1,text : "C18\n16.08",color : "rgb(128, 0, 128)",height : 30,width : 77,pageX : 790,pageY : 364},
                    {id : 1004,type: 1,text : "C19\n16.08",color : "rgb(0, 128, 0)",height : 30,width : 77,pageX : 870,pageY : 364},
                    {id : 1005,type: 1,text : "C20\n16.5",color : "rgb(0, 0, 255)",height : 30,width : 77,pageX : 627,pageY : 439},
                    {id : 1006,type: 1,text : "C21\n16.18",color : "rgb(255, 165, 0)",height : 30,width : 77,pageX : 709,pageY : 439},
                    {id : 1007,type: 1,text : "C22\n16.08",color : "rgb(255, 165, 0)",height : 30,width : 77,pageX : 870,pageY : 439},
                    {id : 1008,type: 1,text : "C23\n16.08",color : "rgb(255, 165, 0)",height : 30,width : 77,pageX : 789,pageY : 439}];
    $.each(loadData, function(i, row){
        createBox(row);
    });
});
</script>
</body>
</html>